<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="../css/login.css">
    <!--ico 图标-->
    <link rel="shortcut icon" href="../images/favicon.ico" />
    <link rel="stylesheet" href="../css/reset.css" >
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element-ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入验证码文件 -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/login.js"></script>
    <script src="../js/yzm.js"></script>
    <!-- axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
<div id="app" >
    <main>
        <div class="inner clearfloat">
            <div class="inner-left">
                <img src="../images/2.jpg">
            </div>
            <div class="inner-right">
                <h1>个人中心---------->修改密码</h1>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="form.name" placeholder="用户名"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="form.pwd" placeholder="密码"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="pwd">
                        <el-input v-model="form.confirmpwd" placeholder="密码"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button id="btn" type="primary" @click="onSubmit">修改</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </div>
    </main>
</div>


<script>

    new Vue({
        el: '#app',
        data: {
            form: {
                name: '',
                pwd: '',
                confirmpwd: '',
            },
        },
        created() {
            const userName = localStorage.getItem("user")
            this.form.name = JSON.parse(userName)
            this.getUserInfo()
        },
        methods: {
            onSubmit(event) {
                event.preventDefault();
                if (this.form.name != null && this.form.pwd != null && this.form.confirmpwd != null) {
                    axios.post("/user/modify",this.form).then( res => {
                        if (res.data.flag == true ) {
                            this.$message.success("修改成功")
                        }else {
                            this.$message.error("两次密码输入不一致")
                            this.form.confirmpwd = '';
                            this.form.name = '';
                            this.form.pwd = '';
                        }
                    })
                } else {
                    this.$message.info("请输入用户名，验证码和密码")
                }

            },
            resetForm(form) {
                this.$refs[form].resetFields()
            },

        }
    })
</script>
</body>

</html></title>
</head>
<body>


</body>
</html>